<template>
    <div class="Information">
      <div class="Function" style="line-height: 50px">
        <el-button type="primary" @click="addArticle">+</el-button>
      </div>
      <section>
        <ArticleCard
            :ArticleList_props_Data="ArticleList_props_Data"
            :project_article_Data="store_article_Data"
        ></ArticleCard>
        <!--      //给子组件传值-->
        <!--  </div>-->
      </section>
      <el-pagination
          :page-size.sync="store_article_pageSize"
          :pager-count="11"
          :current-page="store_article_currentPage"
          layout="prev, pager, next"
          :total="store_article_Count"
          @current-change="this.getArticleByPage"
      >
      </el-pagination>
<!--      <article-edit></article-edit>-->

    </div>
</template>

<script>
import ArticleCard from "@/views/article/ArticleCard";
import {mapState} from "vuex";
import ArticleEdit from "@/views/article/CkEditor5/ArticleEdit";

export default {
  name: "ArticleList",
  components:{
    ArticleCard,ArticleEdit
  },
  async mounted() {
      this.getArticleByPage()
  },computed:{
    ...mapState({
      store_article_Data:(state)=>state.article.articleList,
      store_article_Count:(state)=>state.article.count,
      store_article_currentPage:(state)=>state.article.currentPage,
      store_article_pageSize:(state)=>state.article.pageSize,
    })
  },
  data() {
    return {
      current:'1',
      ArticleList_props_Data: {
        current_path: '/index/information'
      },
      project_article_Data:[]

    }
  },
  methods:{
    addArticle(){
      this.$router.push({
/*      path:'/article/edit',
        query:{
          id:1
        }*/
        name:'ArticleEdit'
      })
    },
    getArticleByPage(page){
      //todo 获取部分文章列表
      this.$store.dispatch("getArticleByPage",page);
    }
  }
}
</script>

<style scoped>

</style>